<template>
	<view class="work-container">
		<!-- 轮播图 -->
		<uni-swiper-dot class="uni-swiper-dot-box" :info="data" :current="current" field="content">
			<swiper class="swiper-box" :current="swiperDotIndex" @change="changeSwiper">
				<swiper-item v-for="(item, index) in data" :key="index">
					<view class="swiper-item" @click="clickBannerItem(item)">
						<image :src="item.image" mode="aspectFill" :draggable="false" />
					</view>
				</swiper-item>
			</swiper>
		</uni-swiper-dot>
		<view class="middle-body">
			<view class="middle-items">
				<view class="middle-items-top-body">
					<text class="middle-items-num">2</text>
					<text class="middle-items-unit">条</text>
				</view>
				<view class="middle-items-bttom-body">
					<text class="middle-items-title">待办数量</text>
				</view>
			</view>
			<view class="middle-items">
				<view class="middle-items-top-body">
					<text class="middle-items-num">1</text>
					<text class="middle-items-unit">篇</text>
				</view>
				<view class="middle-items-bttom-body">
					<text class="middle-items-title">日记篇数</text>
				</view>
			</view>
			<view class="middle-items">
				<view class="middle-items-top-body">
					<text class="middle-items-num">100</text>
					<text class="middle-items-unit">字</text>
				</view>
				<view class="middle-items-bttom-body">
					<text class="middle-items-title">日记字数</text>
				</view>
			</view>
			<view class="middle-items">
				<view class="middle-items-top-body">
					<text class="middle-items-num">2</text>
					<text class="middle-items-unit">本</text>
				</view>
				<view class="middle-items-bttom-body">
					<text class="middle-items-title">日记本</text>
				</view>
			</view>
		</view>
		<!-- 宫格组件 -->
		<view class="grid-body">
			<uni-grid :column="4" :showBorder="true" @change="changeGrid">
				<uni-grid-item>
					<view class="grid-item-box">
						<uni-icons type="compose" size="30" color="#1e90ff"></uni-icons>
						<text class="text">写日记</text>
					</view>
				</uni-grid-item>
				<uni-grid-item>
					<view class="grid-item-box">
						<uni-icons type="calendar" size="30" color="#1e90ff"></uni-icons>
						<text class="text">签到</text>
					</view>
				</uni-grid-item>
				<uni-grid-item>
					<view class="grid-item-box">
						<uni-icons type="list" size="30" color="#1e90ff"></uni-icons>
						<text class="text">待办</text>
					</view>
				</uni-grid-item>
				<uni-grid-item>
					<view class="grid-item-box">
						<uni-icons type="notification" size="30" color="#1e90ff"></uni-icons>
						<text class="text">消息通知</text>
					</view>
				</uni-grid-item>
			</uni-grid>
		</view>
		<view class="todo-title">
			<uni-section title="今日待办" type="line">
			</uni-section>
			<uni-icons type="plus" size="30" color="#1e90ff" class="todo-btn-add"></uni-icons>
		</view>

		<view class="todo-body">
			<!-- <sgyj-todo-list :options="todoList" :showSelect="showSelect" @click="todoOnClick" /> -->
			<sgyj-todo-list :options="todoList"></sgyj-todo-list>
		</view>
	</view>
</template>

<script>
	import {
		checkLogin,
		getToken,
		TokenKey,
		UserKey
	} from '@/utils/auth'
	import {
		getInfo,
		getWxCode,
		getWxOpenId,
		wxLogin
	} from "@/api/login"

	export default {
		data() {
			return {
				current: 0,
				swiperDotIndex: 0,
				data: [{
						image: '/static/images/banner/banner01.jpg'
					},
					{
						image: '/static/images/banner/banner02.jpg'
					},
					{
						image: '/static/images/banner/banner03.jpg'
					}
				],
				showSelect: true,
				todoList: [{
					"letter": "待办",
					"data": [
						"阿克苏机场",
						"阿拉山口机场"
					]
				}, {
					"letter": "已完成",
					"data": [
						"保山机场",
						"包头机场"
					]
				}]
			}
		},
		created() {
			this.initData();
		},
		methods: {
			initData() {
				// 获取当前设备系统信息
				const systemInfo = uni.getSystemInfoSync();
				console.log("当前设备" + systemInfo);
				// 判断平台信息
				if (systemInfo.platform === 'ios') {
					console.log('当前设备为iOS平台');
				} else if (systemInfo.platform === 'android') {
					console.log('当前设备为Android平台');
				} else if (systemInfo.platform === 'h5') {
					console.log('当前设备为H5平台');
				} else if (systemInfo.platform === 'mp-weixin') {
					// 校验是否登录
					if (checkLogin()) { // 存在登录token，验证token有效性
						// token有效，使用用户身份登录（非游客模式）
						const tokenValue = getToken();
						console.log(tokenValue);
					} else { // 没有token信息，创建token, 登录
						// 获取第三方平台ID，比如微信openid等，生成clientIp参数，设置到header中
						// 使用第三方平台ID登录
						// 如果用户允许，在第三方平台中，获取用户手机号；不允许则以游客模式登录。（是否为游客模式，以用户是否绑定有效手机号为准。用户还可通过个人中心手动绑定手机号）
						console.log('没有token的信息');
					}
					console.log('当前设备为微信小程序平台');
					// 首先获取code
					getWxCode().then(res => {
						const code = res;
						console.log('获取到code：', code);
						// 根据code获取微信openId设置到缓存；生成clientIp参数，并设置到缓存
						getWxOpenId(code).then(res => {
							const openId = res.openid;
							uni.setStorageSync(OpenId, openId);
							console.log('获取到openId：', openId);
							// 使用openId进行登录并获取 token
							wxLogin(openId).then(res => {
								const token = res.token;
								uni.setStorageSync(TokenKey, token);
								console.log('获取到token：', token);
							})
						})
					})
				} else if (systemInfo.platform === 'mp-alipay') {
					console.log('当前设备为支付宝小程序平台');
				} else if (systemInfo.platform === 'mp-baidu') {
					console.log('当前设备为百度小程序平台');
				} else if (systemInfo.platform === 'mp-toutiao') {
					console.log('当前设备为今日头条小程序平台');
				} else if (systemInfo.platform === 'mp-qq') {
					console.log('当前设备为QQ小程序平台');
				} else {
					console.log('其他平台');
				}




			},
			clickBannerItem(item) {
				console.info(item)
			},
			changeSwiper(e) {
				this.current = e.detail.current
			},
			changeGrid(e) {
				this.$modal.showToast('模块建设中~')
			},
			todoOnClick(idx, index) {

			}

		}
	}
</script>

<style>
	/* #ifndef APP-NVUE */
	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #fff;
		min-height: 100%;
		height: auto;
	}

	view {
		font-size: 14px;
		line-height: inherit;
	}

	/* #endif */

	.text {
		text-align: center;
		font-size: 26rpx;
		margin-top: 10rpx;
	}

	.grid-item-box {
		flex: 1;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}

	/*
.uni-margin-wrap {
width: 690rpx;
width: 100%;;
}

.swiper {
height: 300rpx;
}
*/

	.swiper-box {
		height: 400rpx;
	}

	.swiper-item {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: center;
		align-items: center;
		color: #fff;
		height: 400rpx;
		line-height: 400rpx;
	}

	@media screen and (min-width: 500px) {
		.uni-swiper-dot-box {
			width: 400px;
			/* #ifndef APP-NVUE */
			margin: 0 auto;
			/* #endif */
			margin-top: 8px;
			background-color: #1cbbb4;
			height: 600rpx;
		}

		.image {
			width: 100%;
		}
	}

	.middle-body {
		background-image: linear-gradient(to bottom, #1E90FF 10%, #F2FCFE 100%);
		box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
		height: 120rpx;
		display: flex;
		flex-direction: row;
		width: 96%;
		margin: 15rpx 2%;
		border-radius: 5px;
	}

	.middle-items {
		margin: 1% 3%;
		width: 30%;
		height: 100rpx;
		text-align: center;
	}

	.todo-title {
		background-color: red;
	}

	.middle-items .middle-items-num {
		color: #FA8C16;
		font-size: 18px;
		text-decoration: underline;
	}

	.middle-items .middle-items-top-body {
		margin-top: 5%;
	}

	.middle-items .middle-items-bttom-body {
		margin-top: 5%;
	}

	.middle-items .middle-items-unit {
		font-size: 16px;
		margin-left: 5px;
	}

	.middle-items .middle-items-title {
		font-size: 16px;
		text-align: center;
	}

	.grid-body {
		width: 96%;
		margin: 15rpx 2%;
		border-radius: 5px;
	}

	.todo-title {
		background-color: red;
		width: 100%;
		height: 79rpx;
	}

	.todo-btn-add {
		position: relative;
		top: -65rpx;
		left: 90%;
	}

	.todo-body {
		background-color: blue;
	}
</style>
